<template>
	<view>
		<u-navbar :is-back="false" title="" :background="background">
			<view class="slot-wrap">消息</view>
<!-- 			<view v-if="userInfo===''" class="slot-right" @click="toLogin">登录</view>
			<view v-if="userInfo!==''">
				<image class="tip-imgbo" src="/static/macroMes.png"></image>
			</view> -->
		</u-navbar>
		<view>
<!-- 			<table-title content="门禁卡申请列表"></table-title>
			<view class="choice-bar">
				<view class="nav-choice" :class="isActive[index]" v-for="(value,index) in navChoice" :key="index"
					@click="changeActive(index)">{{value}}</view>
			</view> -->
			<message-record v-for="(item,index) in recordList" :key="index"
				:company="item.title" :building="item.building" :time="item.time"
				:goods="item.outline" :state="item.state" @getClick="checkDetails(index)"></message-record>
			<view v-show="isLoadMore">
			  	<uni-load-more :status="loadStatus" ></uni-load-more>
			</view>
		</view>
		<!-- <view>{{ pendingObj }}</view> -->
		<uni-popup ref="popup" backgroundColor="#f0f0f0" type="center">
			<scroll-view scroll-y="true" style="height: 1000rpx;width: 750rpx;background-color: #f0f0f0;margin-top: 20rpx;margin-bottom: 10rpx;" scroll-with-animation="true">
				<ruleDisplay :htmlStr="roleInfo" @getClick="closePop"></ruleDisplay>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE,
		syncGetOrderList,
		syncGetOrder,
		syncRuleInfo,
	} from "../../../util/network.js"
	export default{
		data() {
			return {
				roleInfo:'',
				token:'',
				choosedState: '待确认',
				navChoice: ['待确认','办理中','已办结','已驳回','全部'],
				isActive: ['active-choice','nav-choice','nav-choice','nav-choice','nav-choice'],
				activeIndex: 0,
				userId:'',         //用户账号
				recordList:[],     //工单列表
				pageNo:1,
				pageSize:10,
				states:[2],
				background : {
					backgroundColor : '#FFFFFF'
				},
				loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false,  //是否加载中
			}
		},
		
		onNavigationBarButtonTap(){
			console.log("[info]","导航栏按钮触发监听")
			this.$refs.popup.open('center')
		},
		onReachBottom() {
			if(!this.isLoadMore){
				this.isLoadMore=true
				this.loadStatus = "loading"
				this.pageNo+=1
				this.getOrderByState('物品放行办理类',this.states)
			}
		},
		methods: {
			closePop(){
				this.$refs.popup.close()
				uni.navigateTo({
					url:'../details/details?id=待分配' + '&state=' + '待申请'
				})
			},
			/*
			功能：根据单号展示工单详细页面
			参数：
			orderNum：工单号
			state：工单当前状态
		    */
			checkDetails(index) {
				let _this = this
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/message/read/` + this.recordList[index].orderNum,
					header: {
						'Authorization': this.token,
					},
					method:'POST',
					success: function (res) {
						if(res.data.code == 200){
							uni.showModal({
								title: '详细内容',
								content:_this.recordList[index].text,
								showCancel:false
							})
							_this.pageNo = 1
							_this.pageSize = 10
							_this.recordList=[]
							_this.getOrderByState('物品放行办理类',_this.states)
						}
					},
					fail: (res) => {
						console.log("消息通知已读失败")
					}
				})
			},
			
			/*
			功能：根据菜单栏选择的不同状态，渲染当前视图，并根据状态实时查询工单列表
			参数：
			*/
			changeActive(e) {
				this.pageNo = 1
				this.pageSize = 10
				if(e!==this.activeIndex){
					let tmp = [...this.isActive]
					tmp[e] = 'active-choice'
					tmp[this.activeIndex] = 'nav-choice'
					this.activeIndex = e
					this.isActive = tmp
					this.choosedState = this.navChoice[this.activeIndex]
				}
				console.log("info","在此处调接口，根据choosedStat，重载recordList数组")
				switch(this.choosedState) {
				     case "待确认":
						this.states = [2]
				        break;
				     case "办理中":
						this.states = [0,1]
				        break;
					 case "已办结":
						this.states = [3]
					    break;
					 case "已驳回":
						this.states = [4]
					    break;
					 case "全部":
						this.states = [0,1,2,3,4]
					    break;
				     default:
				        itemTmp.state = "全部"
				} 
				this.recordList=[]
				this.getOrderByState('物品放行办理类',this.states)
			},
			
			/*
			功能：根据工单类别及状态实时查询工单列表
			参数：
			orderType：工单类别
			state：工单当前状态
		    */
		   listPush(item){
		   	let itemTmp = {'orderNum':'','title':'默认服务','building':'','time':'',
		   	'outline':'','status':-1, 'state':true, 'text':''}
			itemTmp.text = item.text
			if(item.businessProcessNo != 'normal'){
				itemTmp.title = "服务进度提醒"
			}else{
				itemTmp.title = "通知"
			}
		   	itemTmp.orderNum = item.id
			itemTmp.outline = `您参与的工单(${item.businessProcessNo})有了新的进度变化。`
			let timeArray = item.createTime.split('T')
			let creatDate = new Date(timeArray[0])
		   	itemTmp.time = item.createTime.replace('T',' ')
			var today = new Date();
			var yesterday = new Date(today - 1000 * 60 * 60 * 24);
			if (yesterday.getYear() === creatDate.getYear() && yesterday.getMonth() === creatDate.getMonth() && yesterday.getDate() === creatDate.getDate()) {
				itemTmp.time = "昨天"
			} else {
				if(today.toDateString() === creatDate.toDateString()){
					itemTmp.time = timeArray[1]
				}else{
					itemTmp.time = timeArray[0].replace("-","/").replace("-","/")
				}
			}
		   	itemTmp.status = item.status
		   	switch(item.isRead) {
		   	     case 0:
		   	        itemTmp.state = true
		   	        break;
		   	     default:
		   	        itemTmp.state = false
		   	} 
		   	this.recordList.push(itemTmp)
		   	
		   },
		   getOrderByState(orderType,state){
			   let _this = this
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/message/list`,
					header: {
						'Authorization': this.token,
					},
					data:{ 
							pageNo:this.pageNo,
							pageSize:this.pageSize,
							receiverUserType:0,
					},
					method:'GET',
					success: function (res) {
						console.log('待处理',res)
						 if(res.data.code == 200){
							for (var i = 0; i < res.data.data.messageList.length; i++) {
								_this.listPush(res.data.data.messageList[i])
							}
							if(res.data.data.messageList.length <= 0){
								_this.isLoadMore = true
								_this.loadStatus = 'nomore'
							}else{
								_this.isLoadMore = false
								_this.loadStatus = 'nomore'
							}
						}else {
							_this.isLoadMore = false
							console.log("[info]","请求失败请检查网络情况")
						}
					}
				})
		   },
		},
		//初始化加载页面（待确认页面）
		mounted() {
			console.log("[info]","测试初始化" + uni.getStorageSync('userinfo'))
			if(uni.getStorageSync('userinfo') != ""){
				this.token = uni.getStorageSync('token')
			}else{
				uni.navigateTo('../../login/login')
			}
			let rule = syncRuleInfo(0)
			rule.then((res) => {
				console.log(res)
				this.roleInfo = res.data.data.text
			})

		},
		onShow() {
			console.log(this.$pendingObj.pendingObj)
			this.pageNo = 1
			this.pageSize = 10
			this.recordList=[]
			this.token = uni.getStorageSync('token')
			this.getOrderByState('物品放行办理类',this.states)
		}
	}
</script>

<style>
	page{
		background-color: #ffffff
	}
	.nav-choice{
		height: 100rpx;
		width: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		border-bottom: solid 5rpx #F1F1F1;
	}
	.choice-bar{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content:center;
		color: #808080;
	}
	.active-choice{
		height: 100rpx;
		width: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight:600;
		color: #DD524D;
		border-bottom: solid 5rpx #DD524D;
	}
	::-webkit-scrollbar {
		display:none;
		width:0;
		height:0;
		color:transparent;
	}
	.slot-wrap {
		display: flex;
		align-items: center;
		padding-left: 40rpx;
		font-size: 35rpx;
		font-weight: 700;
	}
</style>
